<#include "/common/layout.html">
<@header>
</@header>
<@body>
<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <h1>
      	主面板
      <small>显示系统各种信息</small>
    </h1>
  </section>

  <!-- Main content -->
  <section class="content">
	
	<div class="row">
       <div class="col-md-3 col-sm-6 col-xs-12">
         <div class="info-box">
           <span class="info-box-icon bg-aqua"><i class="fa fa-cart-plus"></i></span>
           <div class="info-box-content">
             <span class="info-box-text">CPU Traffic</span>
             <span class="info-box-number">90<small>%</small></span>
           </div><!-- /.info-box-content -->
         </div><!-- /.info-box -->
       </div><!-- /.col -->
       <div class="col-md-3 col-sm-6 col-xs-12">
         <div class="info-box">
           <span class="info-box-icon bg-red"><i class="fa fa-google-plus"></i></span>
           <div class="info-box-content">
             <span class="info-box-text">Likes</span>
             <span class="info-box-number">41,410</span>
           </div><!-- /.info-box-content -->
         </div><!-- /.info-box -->
       </div><!-- /.col -->

       <!-- fix for small devices only -->
       <div class="clearfix visible-sm-block"></div>

       <div class="col-md-3 col-sm-6 col-xs-12">
         <div class="info-box">
           <span class="info-box-icon bg-green"><i class="fa fa-check"></i></span>
           <div class="info-box-content">
             <span class="info-box-text">Sales</span>
             <span class="info-box-number">760</span>
           </div><!-- /.info-box-content -->
         </div><!-- /.info-box -->
       </div><!-- /.col -->
       <div class="col-md-3 col-sm-6 col-xs-12">
         <div class="info-box">
           <span class="info-box-icon bg-yellow"><i class="fa fa-jpy"></i></span>
           <div class="info-box-content">
             <span class="info-box-text">New Members</span>
             <span class="info-box-number">2,000</span>
           </div><!-- /.info-box-content -->
         </div><!-- /.info-box -->
       </div><!-- /.col -->
     </div><!-- /.row -->
     <div class="row">
   	  <div class="col-md-12">
          <!-- LINE CHART -->
          <div class="box box-info">
            <div class="box-header with-border">
              <h3 class="box-title">Line Chart</h3>
              <div class="box-tools pull-right">
                <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
              </div>
            </div>
            <div class="box-body">
              <div class="chart">
                <canvas id="lineChart" style="height:250px"></canvas>
              </div>
            </div><!-- /.box-body -->
          </div><!-- /.box -->

          <!-- BAR CHART -->
          <div class="box box-success">
            <div class="box-header with-border">
              <h3 class="box-title">Bar Chart</h3>
              <div class="box-tools pull-right">
                <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
              </div>
            </div>
            <div class="box-body">
              <div class="chart">
                <canvas id="barChart" style="height:230px"></canvas>
              </div>
            </div><!-- /.box-body -->
          </div><!-- /.box -->

        </div><!-- /.col (RIGHT) -->
     </div>
  </section><!-- /.content -->
</div><!-- /.content-wrapper -->
</@body>
<@footer>
 <!-- ChartJS 1.0.1 -->
<script src="/plugins/chartjs/Chart.min.js"></script>
<script>
	$(function(){
		 var areaChartData = {
	          labels: ["January", "February", "March", "April", "May", "June", "July"],
	          datasets: [
	            {
	              label: "Electronics",
	              fillColor: "rgba(210, 214, 222, 1)",
	              strokeColor: "rgba(210, 214, 222, 1)",
	              pointColor: "rgba(210, 214, 222, 1)",
	              pointStrokeColor: "#c1c7d1",
	              pointHighlightFill: "#fff",
	              pointHighlightStroke: "rgba(220,220,220,1)",
	              data: [65, 59, 80, 81, 56, 55, 40]
	            },
	            {
	              label: "Digital Goods",
	              fillColor: "rgba(60,141,188,0.9)",
	              strokeColor: "rgba(60,141,188,0.8)",
	              pointColor: "#3b8bba",
	              pointStrokeColor: "rgba(60,141,188,1)",
	              pointHighlightFill: "#fff",
	              pointHighlightStroke: "rgba(60,141,188,1)",
	              data: [28, 48, 40, 19, 86, 27, 90]
	            }
	          ]
	        };
		    
		 var areaChartOptions = {
		          //Boolean - If we should show the scale at all
		          showScale: true,
		          //Boolean - Whether grid lines are shown across the chart
		          scaleShowGridLines: false,
		          //String - Colour of the grid lines
		          scaleGridLineColor: "rgba(0,0,0,.05)",
		          //Number - Width of the grid lines
		          scaleGridLineWidth: 1,
		          //Boolean - Whether to show horizontal lines (except X axis)
		          scaleShowHorizontalLines: true,
		          //Boolean - Whether to show vertical lines (except Y axis)
		          scaleShowVerticalLines: true,
		          //Boolean - Whether the line is curved between points
		          bezierCurve: true,
		          //Number - Tension of the bezier curve between points
		          bezierCurveTension: 0.3,
		          //Boolean - Whether to show a dot for each point
		          pointDot: false,
		          //Number - Radius of each point dot in pixels
		          pointDotRadius: 4,
		          //Number - Pixel width of point dot stroke
		          pointDotStrokeWidth: 1,
		          //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
		          pointHitDetectionRadius: 20,
		          //Boolean - Whether to show a stroke for datasets
		          datasetStroke: true,
		          //Number - Pixel width of dataset stroke
		          datasetStrokeWidth: 2,
		          //Boolean - Whether to fill the dataset with a color
		          datasetFill: true,
		          //String - A legend template
		          legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
		          //Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
		          maintainAspectRatio: true,
		          //Boolean - whether to make the chart responsive to window resizing
		          responsive: true
		        };
		 
		   //- LINE CHART -
	        //--------------
	        var lineChartCanvas = $("#lineChart").get(0).getContext("2d");
	        var lineChart = new Chart(lineChartCanvas);
	        var lineChartOptions = areaChartOptions;
	        lineChartOptions.datasetFill = false;
	        lineChart.Line(areaChartData, lineChartOptions);
	        
	        
	      //- BAR CHART -
	        //-------------
	        var barChartCanvas = $("#barChart").get(0).getContext("2d");
	        var barChart = new Chart(barChartCanvas);
	        var barChartData = areaChartData;
	        barChartData.datasets[1].fillColor = "#00a65a";
	        barChartData.datasets[1].strokeColor = "#00a65a";
	        barChartData.datasets[1].pointColor = "#00a65a";
	        var barChartOptions = {
	          //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
	          scaleBeginAtZero: true,
	          //Boolean - Whether grid lines are shown across the chart
	          scaleShowGridLines: true,
	          //String - Colour of the grid lines
	          scaleGridLineColor: "rgba(0,0,0,.05)",
	          //Number - Width of the grid lines
	          scaleGridLineWidth: 1,
	          //Boolean - Whether to show horizontal lines (except X axis)
	          scaleShowHorizontalLines: true,
	          //Boolean - Whether to show vertical lines (except Y axis)
	          scaleShowVerticalLines: true,
	          //Boolean - If there is a stroke on each bar
	          barShowStroke: true,
	          //Number - Pixel width of the bar stroke
	          barStrokeWidth: 2,
	          //Number - Spacing between each of the X value sets
	          barValueSpacing: 5,
	          //Number - Spacing between data sets within X values
	          barDatasetSpacing: 1,
	          //String - A legend template
	          legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
	          //Boolean - whether to make the chart responsive
	          responsive: true,
	          maintainAspectRatio: true
	        };

	        barChartOptions.datasetFill = false;
	        barChart.Bar(barChartData, barChartOptions);
	        
	});
</script>
</@footer>